import React, { useState, useEffect } from 'react';
import { Form, Row, Col, Table, Divider, Modal, message } from 'antd';
import { connect, useDispatch } from 'umi';

import styles from './AppDetail.less';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const AppDetail = props => {
  const { loading: { effects } } = props;
  const { record } = props.location.state;
  const {appCode,appName,creator,gmtCreated } = record;
  const [form] = Form.useForm();

  const dispatch = useDispatch();
  const [functionInfoList, setFunctionInfoList] = useState([]);
  const [visibleKeyModal,setVisibleKeyModal] = useState(false);
  const [appSecret,setAppSecret] = useState('');

  const getFunctionInfoList = () => {
    dispatch({
      type: 'appManageModel/getFunctionInfoList',
      payload: {appId: record.id}
    }).then(res => {
      const { code, data, message: errMsg } = res;
      if (code === 0) {
        setFunctionInfoList(data);
      }else{
        message.error(errMsg);
      }
    })
  }

  useEffect(() => {
    getFunctionInfoList();
  }, [])

  const searchKey = row => {
    setVisibleKeyModal(true);
    setAppSecret(row.appSecret)
  }

  const deleteKey = row => {
    dispatch({
      type: 'appManageModel/deleteAuthInfo',
      payload: {
        id: row.id,
        appFunctionId: row.appFunctionId
      }
    }).then(res => {
      const { code ,message:errMsg} = res;
      if(code ===0){
        message.success('删除成功！');
        getFunctionInfoList();
      }else{
        message.error(errMsg);
      }
    })
  }

  const handleKeyCancel = () =>{
    setVisibleKeyModal(false);
    setAppSecret("");
  }

  const columns = [
    {
      title: 'APPKey',
      dataIndex: 'appKey',
      key: 'appKey',
      width: 150
    },
    {
      title: '开通服务类型',
      dataIndex: 'functionName',
      key: 'functionName',
    },
    {
      title: '操作',
      dataIndex: '',
      key: '',
      width: 150,
      render: (text, row) => {
        return (<div>
          <a onClick={() => searchKey(row) }>查看秘钥</a>
          <Divider type="vertical" />
          <a onClick={() => deleteKey(row) }>删除</a>
        </div>)
      }
    },
  ];

  return (
    <div className={styles.root}>
      <div className={styles.applyInfo}>
        <Form {...layout} form={form} name="advanced_search">
          <Row gutter={[32, 16]}>
            <Col className="gutter-row" span={6}>
              <Form.Item name="appCode" label='应用编码'>
                {appCode}
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={6}>
              <Form.Item name="creator" label="创建人">
                <span style={{color:"#5ad6d6"}}> {creator} </span>
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={6}>
              <Form.Item name="gmtCreated" label="创建时间">
                {gmtCreated}
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={6}>
              <Form.Item name="appName" label="应用名称">
                {appName}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
      <div className={styles.tableWapper}>
        <div className={styles.listHead}>
          <div className={styles.listTitle}>权限信息</div>
        </div>
        <div className={styles.listTable}>
          <Table
            columns={columns}
            dataSource={functionInfoList}
            loading={effects['appManageModel/getFunctionInfoList']}
            pagination={false}
          />
        </div>
      </div>
      <Modal
        title = "查看秘钥"
        visible={visibleKeyModal}
        onCancel={handleKeyCancel}
        footer={null}
      >
        {appSecret}
      </Modal>
    </div>
  )
}

export default connect(state => state)(AppDetail);